<!DOCTYPE html>
<html>
{include file="public:header"}

<body class="no-skin">
<!--头部-->
{include file="public:nav"}

<div class="main-container ace-save-state" id="main-container">
  <!--菜单-->
  <script type="text/javascript">
  try{ace.settings.loadState('main-container')}catch(e){}
</script>

{include file="public:left"}

  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="{:url('Index/index')}">首页</a>
          </li>
          <li class="active">图片列表</li>
        </ul><!-- /.breadcrumb -->
      </div>

      <div class="page-content">

        {include file="public:set"}

        <div class="row">
          <div class="col-xs-12">
            <div class="col-sm-10 col-sm-offset-1">
              <div class="page-header">
                <div class="row">
                  <div class="col-sm-4">
                    <button class="btn btn-success btn-white btn-bold" data-toggle="modal" data-target="#add">
                      <i class="ace-icon fa fa-plus icon-only"></i>
                      添加
                    </button>
                    <button id="change" class="btn btn-warning btn-white btn-bold">
                      <i class="fa fa-exchange"></i>
                      排序
                    </button>
                    <button class="btn btn-danger btn-white btn-bold del-btn">
                      <i class="ace-icon fa fa-trash-o icon-only"></i>
                      删除
                    </button>
                  </div>

                 <!-- <div class="col-sm-8 clearfix">
                    <form class="form-inline pull-right" action="">
                      <div class="form-group">
                        <div class="input-group">
									<span class="input-group-addon">
											<i class="fa fa-th-list"></i>
										</span>
                          <select class="form-control" name="" id="">
                            <option selected value="">分类</option>
                            <option value="">asdasd</option>
                            <option value="">asdasd</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group">-->
                      <!--<div class="input-group">-->
                      <!--<span class="input-group-addon">-->
                      <!--<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>-->
                      <!--</span>-->
                      <!--<input type="text" class="form-control" value="" placeholder="点击选择日期范围" name="date-range-picker"-->
                      <!--id="id-date-range-picker-1">-->
                      <!--</div>-->
                      <!--</div>
                      <div class="form-group">
                        <div class="input-group">
									<span class="input-group-addon">
										<i class="ace-icon fa fa-check"></i>
									</span>
                          <input type="text" name="key" id="key" class="form-control search-query" value=""
                                 placeholder="请输入需查询的关键字">
                          <span class="input-group-btn">
										<button type="submit" class="btn btn-info btn-sm ajax-search-form">
											<span class="ace-icon fa fa-search icon-on-right bigger-120"></span> 搜索
									</button>
									</span>
                        </div>
                      </div>
                    </form>
                  </div>-->
                </div>
              </div>
              <table class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th class="center">
                    <label class="pos-rel">
                      <input type="checkbox" class="ace checkAll">
                      <span class="lbl"></span>
                    </label>
                  </th>
                  <th>ID</th>
                  <th class="hidden-480">排序</th>
                  <th>广告位</th>
                  <th>名称</th>
                  <th class="hidden-480">URL</th>
                  <th class="hidden-480">缩略图</th>
                  <th>状态</th>
                  <th style="border-right:#ddd solid 1px;">操作</th>
                </tr>
                </thead>
              <form id="sortForm" action="__URL__/sort" method="post"> 
                
                <tbody>
                {volist name="list" id="v"}
                
                <tr>
                  <td class="center"><label class="pos-rel">
                    <input type="checkbox" class="ace check" value="{$v.id}">
                    <span class="lbl"></span>
                  </label>
                  </td>
                  <td><span class="badge badge-grey">{$v.id}</span></td>
                  <td class="hidden-480"><input class="input-small" type="number" name="{$v.id}" value="{$v.sort}"></td>
                  
                  <td>{$v.pl_name}</td>
                  <td>{$v.name}</td>
                  <td class="hidden-480"><a href="{$v.url}" target="_blank">{$v.url}</a></td>
                  <td class="ace-thumbnails hidden-480" style="background:#c9c6cc;">
                    <li><a href="{$v.image}" data-rel="colorbox">
                      <img width="80" height="80" alt="150x150" src="{$v.image}"/>
                      <div class="text">
                        <div class="inner">点击放大</div>
                      </div>
                    </a></li>
                  </td>
                  <td>
                    <label>
                      <input class="ace ace-switch ace-switch-6" onclick="change({$v.id})" type="checkbox" {if condition="$v.status eq 1" }checked{/if} />
                      <span class="lbl"></span>
                    </label>
                  </td>
                  <td>
                    <button class="btn btn-xs btn-info" type="button" onclick="ajaxQuery('__URL__/modifys',{$v.id},readData)">
                      <i class="ace-icon fa fa-pencil bigger-120"></i>
                    </button>
                    <button class="btn btn-xs btn-danger" type="button" onclick="dels({$v.id})">
                      <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </button>
                  </td>
                </tr>
                
                 {/volist}
                 {empty name="list"}<tr><td colspan="11" class="text-center">暂无数据</td></tr>{/empty}
                </tbody>
               
              </form>
              </table>
              <div class="text-center">
                <ul class="pagination">
                  {$list->render();}
                </ul>
              </div>
            </div>
            <!-- PAGE CONTENT BEGINS -->

            <!-- PAGE CONTENT ENDS -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content -->
    </div>
  </div><!-- /.main-content -->
  <!-- Modal -->
  <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">添加</h4>
        </div>
  <form id="modal-form" class="form-horizontal" action="__URL__/save" method="post" enctype="multipart/form-data">
        
        <div class="modal-body">

            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="">名称</label>
              <div class="col-sm-3">
                <input id="name" class="form-control" type="text" name="name" required>
              </div>

              <label class="col-sm-2 control-label no-padding-right" for="">广告位</label>
              <div class="col-sm-3">
                <select class="form-control" id="fid" name="fid">
                 {volist name="res" id="vs"}
                  <option value="{$vs.pl_id}">{$vs.pl_name}</option>
                 {/volist}
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="">排序</label>
              <div class="col-sm-4">
                <input id="order" class="input-small" name="sort" type="number" value="50">
              </div>
              <label class="col-sm-2 control-label no-padding-right" for="">状态</label>
              <div class="col-sm-4">
                <label style="padding-top: 8px">
                  <input id="statu" name="status" class="ace ace-switch ace-switch-6" type="checkbox" checked/>
                  <span class="lbl"></span>
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="">URL</label>
              <div class="col-sm-8">
                <input id="url" class="form-control" type="text" name="url" placeholder="请以http://开头">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="">简介</label>
              <div class="col-sm-8">
                <textarea class="form-control" name="desc" id="desc" cols="" rows="5"></textarea>
                <!--<input class="col-xs-12 col-sm-5" type="text">-->
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="">图片</label>
              <div class="col-xs-8">
                <input multiple="" type="file" id="pic" name="image" />
                <img src="" id="image" class="img-responsive" />
              </div>
            </div>
            <input id="id" name="id" type="hidden">
        
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button  type="submit" class="btn btn-primary">保存</button>
        </div>
         </form>
      </div>
    </div>
  </div>

  {include file="public:footer"}

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
  <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->


<!-- inline scripts related to this page -->
<script>
  jQuery(function($) {
    $('[data-rel=tooltip]').tooltip();

    $( "#hide-option" ).tooltip({
      hide: {
        effect: "explode",
        delay: 250
      }
    });

  })

 
</script>
<script type="text/javascript">
		function dels(id){
			layer.confirm('你确定删除吗？', {icon: 3}, function(index){
		    layer.close(index);
		    window.location.href="__URL__/delete/id/"+id;
		  });
	    }
		</script>
<script>
$(function(){
	$('#modal-form').ajaxForm({
		beforeSubmit: checkForm, // 此方法主要是提交前执行的方法，根据需要设置
		success: complete, // 这是提交后的方法
		dataType: 'json'
	});
	
	function checkForm(){
	  
		
    }

	function complete(data){
		if(data.status==1){
			layer.alert(data.msg, {icon: 5}, function(index){
 			layer.close(index);
 			window.location.href=data.url;
			});
			
		}else{
			layer.alert(data.msg, {icon: 6}, function(index){
 			layer.close(index);
 			window.location.href=data.url;
			});
			
		}
	}
 
});

</script>
<script>
function change(id){
	$.ajax({
		type:"post",
		url:"__URL__/change",
	    data:{id:id},
	    datatype:"text",
	    success:function(){
	    	
	    }
	})
}

</script>
  <script>
    $(function () {
      $('#pic').ace_file_input({
        style: 'well',
        btn_choose: '图片',
        btn_change: null,
        no_icon: 'ace-icon fa fa-picture-o',
        droppable: true,
        thumbnail: 'fit'//large | fit
        //,icon_remove:null//set null, to hide remove/reset button
        /**,before_change:function(files, dropped) {
						//Check an example below
						//or examples/file-upload.html
						return true;
					}*/
        /**,before_remove : function() {
						return true;
					}*/
        ,
        preview_error: function (filename, error_code) {
          //name of the file that failed
          //error_code values
          //1 = 'FILE_LOAD_FAILED',
          //2 = 'IMAGE_LOAD_FAILED',
          //3 = 'THUMBNAIL_FAILED'
          //alert(error_code);
        }

      }).on('change', function (e) {
    	  console.log(e.target.value)
        //console.log($(this).data('ace_input_files'));
        //console.log($(this).data('ace_input_method'));
      });

     
    });

    //向模态框写入数据
    function readData(data) {
      $(".modal-title").text('修改');
      $("#id").val(data.id);
      $("#fid").val(data.fid);
      $("#name").val(data.name);
      $("#url").val(data.url);
      $("#sort").val(data.sort);
      $("#statu").prop("checked", data.status);
      $("#desc").text(data.desc);
      $("#image").attr('src',data.image);
      $('#add').modal('show');
    }

    function gs() {
      console.log(1)
    }
    $("#change").click(function(){
    	$("#sortForm").submit();
    })
    
    
    //bs模态框关闭事件回调函数
    $('#add').on('hidden.bs.modal', function (e) {
  // do something...
  $('#modal-form').get(0).reset();
  $(".modal-title").text('添加');
  $("#desc").text('');
  $("#image").attr('src','');
  $("#id").val("");
	})
  </script>
</body>
</html>
